<template>
  <!-- cate -->
  <section class="banner-section">
    <div class="b-sec-wrapper wrapper">
      <div class="b-section-cate">
        <ul class="cate-list">
          <li
            class="cate-list-item"
            v-for="(item, index) in cateList"
            :key="item.catId"
            v-show="index <= 7"
            @click="goCatePage(item)"
          >
            <div class="cate">
              <el-icon><CoffeeCup /></el-icon>
              <span class="cate-text">{{ item.name }}</span>
            </div>
            <el-icon><ArrowRight /></el-icon>
          </li>
        </ul>
      </div>
      <div class="b-section-banner">
        <el-carousel trigger="click" height="400px">
          <el-carousel-item v-for="item in bannerList" :key="item.id">
            <img :src="item.url" alt="" class="banner" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="b-section-rt">
        <div class="user-container">
          <el-avatar :src="userStore.avatar" :size="60"></el-avatar>
          <div class="login-box" v-if="!getToken()">
            <span class="link"><router-link to="/login">登录</router-link></span>
            <span>|</span>
            <span class="link"><router-link to="/register">注册</router-link></span>
          </div>
          <div
            class="login-box"
            v-if="getToken()"
            style="display: flex; justify-content: center"
          >
            <span class="link" @click="logout">退出登录</span>
          </div>
        </div>
        <div class="notice-list">
          <div class="n-list-header">
            <span>资讯公告</span>
            <span
              @click="
                () => {
                  router.push({ path: '/notice/list' });
                }
              "
              >更多</span
            >
          </div>
          <ul class="n-list">
            <li
              class="n-item"
              v-for="item in noticeList"
              :key="item.id"
              @click="
                router.push({
                  path: '/notice',
                  query: { noticeId: item.noticeId },
                })
              "
            >
              <el-tag type="success" size="small" effect="plain">公告</el-tag>
              <div class="notice">{{ item.noticeTitle }}</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </section>
  <!-- product -->
  <section class="product-section">
    <div class="prd-wrapper wrapper">
      <div class="prd-header">为你推荐</div>
      <div class="prd-content">
        <el-row :gutter="20">
          <el-col :span="5" v-for="item in productList" :key="item.skuId">
            <ProductCard :product="item" />
          </el-col>
        </el-row>
      </div>
    </div>
  </section>
</template>

<script setup>
import { useRouter } from "vue-router";
import ProductCard from "@/components-mall/ProductCard";
import { getSearchOptions } from "@/api/mall/client/cate";
import { listNotice } from "@/api/system/notice";
import useUserStore from "@/store/modules/user";
import { getToken } from "@/utils/auth";
import { ElMessageBox } from "element-plus";
import { recommendProduct } from "@/api/mall/client/product";
const router = useRouter();
const cateList = ref([]);
const baseUrl = import.meta.env.VITE_APP_BASE_API;
// 获取cateList
const getCateList = async () => {
  const res = await getSearchOptions();
  cateList.value = res.data.categories;
};

const userStore = useUserStore();

// 获取公告
const noticeList = ref([]);
const getNoticeList = async () => {
  const res = await listNotice({ pageNum: 1, pageSize: 7 });
  noticeList.value = res.rows;
};

// 页面跳转
const goCatePage = (item) => {
  router.push({
    path: "/cate",
    query: {
      catId: item.catId,
    },
  });
};
const bannerList = ref([
  {
    id: 1,
    url: "https://www.chawo.com/data/upload/shop/editor/web-101-101-4.jpg?586",
    title: "中茶",
    desc:
      "中茶，是茶叶的一种，茶叶的一种，茶叶的一种，茶叶的一种，茶叶的一种，茶叶的一种，茶叶的一种，茶叶的一种，茶叶的一种，叶的一种，茶叶的一种",
    catId: 1,
  },
  {
    id: 2,
    url:
      "https://chadian-img.oss-cn-shanghai.aliyuncs.com/product/021e14a363c4425abe033c16e0e4c2d4.jpg",
    title: "中茶",
    desc:
      "中茶，是茶叶的一种，茶叶的一种，茶叶的一种，茶叶的一种，茶叶的一种，茶叶的一种，茶叶的一种，茶叶的一种，茶叶的一种，叶的一种，茶叶的一种",
    catId: 2,
  },
  {
    id: 3,
    url:
      "https://chadian-img.oss-cn-shanghai.aliyuncs.com/product/e00794e2eeb44aa39f61d5e56a23829d.jpg",
    title: "中茶",
    desc:
      "中茶，是茶叶的一种，茶叶的一种，茶叶的一种，茶叶的一种，茶叶的一种，茶叶的一种，茶叶的一种，茶叶的一种，茶叶的一种，叶的一种，茶叶的一种",
    catId: 3,
  },
]);
// 退出登录
const logout = () => {
  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      userStore.logOut().then(() => {
        location.href = "/";
      });
    })
    .catch(() => {});
};

// 商品列表
const productList = ref([]);
const getProductList = async () => {
  const res = await recommendProduct();
  productList.value = res.data;
};
Promise.all([getCateList(), getNoticeList(), getProductList()]);
// 分类
</script>

<style lang="scss" scoped>
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  li {
    cursor: pointer;
  }
}
.wrapper {
  margin: 0 auto;
  width: 1200px;
  background: #fff;
}
.banner-section {
  padding: 0px 0;
  height: 400px;
  .b-sec-wrapper {
    display: flex;
  }

  .b-section-cate {
    width: 220px;
    background: #1f2937;
    overflow: hidden;

    .cate-list {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-sizing: border-box;
      .cate-list-item {
        display: flex;
        justify-content: space-between;
        color: #fff;
        align-items: center;
        height: 50px;
        padding: 0 10px 0 20px;
        transition: all 0.3s;

        .el-icon {
          font-size: 20px;
        }

        .cate {
          display: flex;
          align-items: center;
          .cate-text {
            margin-left: 5px;
            letter-spacing: 2px;
          }
        }

        &:hover {
          background: #fff;
          color: #1aa684;
        }
      }
    }
  }
  .b-section-banner {
    width: 720px;
    .banner {
      width: 720px;
      height: 400px;
      object-fit: cover;
    }
  }
  .b-section-rt {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 10px;
    overflow: hidden;
    box-sizing: border-box;
    .user-container {
      height: 150px;
      display: flex;
      flex-direction: column;
      align-items: center;
      border-bottom: 1px solid #e5e7eb;
      justify-content: center;
      .login-box {
        padding: 15px 0 0px 0;
        display: flex;
        justify-content: space-between;
        width: 30%;
        font-size: 14px;
        .link {
          transition: all 0.3s;

          &:hover {
            color: #45b584;
          }
        }
      }
    }
    .notice-list {
      width: 100%;
      flex: 1;
      .n-list-header {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        color: #666;
        padding: 10px 0px 0 0px;
      }
      .n-list {
        .n-item {
          display: flex;
          align-items: center;
          // justify-content: space-between;
          height: 20px;
          margin: 10px 0;
          flex-wrap: nowrap;
          .el-tag {
            margin-right: 10px;
          }
          .notice {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            transition: all 0.3s;

            &:hover {
              color: #45b584;
            }
          }
        }
      }
    }
  }
}
.product-section {
  background: #f4f4f4;
  .prd-header {
    font-weight: 600;
    background: #f4f4f4;
    text-align: center;
    padding: 20px;
  }
  .prd-content {
    background: #f4f4f4;
  }
}

.el-col-5 {
  width: 20%;
  max-width: 20%;
  flex: 0 0 20%;
}
</style>
